<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加</title>
    <link href="../../layuiadmin/js/adm/css/bootstrap.css" rel="stylesheet">
    <script src="../../layuiadmin/js/adm/js/vue.js"></script>
    <script src="../../layuiadmin/js/adm/js/vue-resource.js"></script>
    <script src="../../layuiadmin/js/adm/js/jquery.min.js"></script>
    <script src="../../layuiadmin/js/adm/js/bootstrap.js"></script>
    <script src="../../layuiadmin/js/adm/js/getUrlParam.js"></script>
    <script src="../../layuiadmin/js/adm/js/date.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@1.4/lib/theme-default/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui@1.4/lib/index.js"></script>
    <script src="../../layuiadmin/js/adm/js/jquery.cookie.js"></script>
</head>
<body>
    <div id="app"  class="container-fluid" style="margin: 20px 10%">
        <h4 style="size: 30px;margin-top: 30px"><b>丨基本资料</b></h4>
        <hr>
        <form class="form-horizontal">
            <div class="row" style="margin-top: 20px">
                <div class="col-md-6">
                    <p><b><span style="color: red">*&nbsp;</span>单位名称：</b></p>
                    <input type="text" v-model="addess.addressUnit"  class="form-control" placeholder="单位名称">
                 </div>
                 <div class="col-md-6">
                    <p><b><span style="color: red">*&nbsp;</span>联系人：</b></p>
                    <input type="text" v-model="addess.addressName" class="form-control" placeholder="联系人">
                 </div>
            </div>
            <div class="row" style="margin-top: 20px">
                <div class="col-md-6">
                    <p><b><span style="color: red">*&nbsp;</span>手机号码：</b></p>
                    <input type="text" v-model="addess.addressPhone" class="form-control" placeholder="手机号码">
                 </div>
            </div>
            
        <h4 style="size: 30px;margin-top: 30px"><b>丨其他选填</b> &nbsp;&nbsp; <button type="button" class="btn btn-default btn-xs" @click="opone()">其他</button>  </h4>
        <div id="opone" style="display: none"> 
            <div class="row" style="margin-top: 20px">
                <div class="col-md-6">
                    <p><b>部门：</b></p>
                    <input type="text" v-model="addess.addressDepartment" class="form-control" placeholder="部门">
                </div>
                <div class="col-md-6">
                    <p><b>职位：</b></p>
                    <input type="text" v-model="addess.addressPosition" class="form-control" placeholder="职位">
                </div>
            </div>
            <div class="row" style="margin-top: 20px">
                <div class="col-md-6">
                    <p><b>固定电话：</b></p>
                    <input type="text" v-model="addess.addressDecide" class="form-control" placeholder="固定电话">
                </div>
                <div class="col-md-6">
                    <p><b>邮箱：</b></p>
                    <input type="text" v-model="addess.addressEmail" class="form-control" placeholder="邮箱">
                </div>
            </div>
            <div class="row" style="margin-top: 20px">
                <div class="col-md-12">
                    <p><b>详细地址：</b></p>
                    <input type="text" v-model="addess.addressSite" class="form-control" placeholder="详细地址">
                </div>
            </div>
            <div class="row" style="margin-top: 20px">
                <div class="col-md-12">
                    <p><b>备注：</b></p>
                    <input type="text" v-model="addess.addressRemark" class="form-control" placeholder="详细地址">
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 20px">
            <div class="col-md-6">
                <input type="button" @click="insert()" class="btn btn-primary" value="确认添加">
            </div>
        </div>
        </form>
    </div>
    

    <script>
          var vm=new Vue({
            el:'#app',
            data:{
                pd:"1",
                addess:{
                    addressId:"",
                    addressUnit:"",
                    addressName:"",
                    addressPhone:"",
                    addressDecide:"",
                    addressDepartment:"",
                    addressPosition:"",
                    addressEmail:"",
                    addressSite:"",
                    addressRemark:""
                }
            },
            methods: {
                opone(){
                    if(this.pd=='1'){
                        $("#opone").css("display","inline")
                        this.pd='2'
                    }else{
                        $("#opone").css("display","none")
                        this.pd='1'
                    }
                },
                insert(){
                    if(this.addess.addressName==""||this.addess.addressPhone==""||this.addess.addressUnit==""){
                        this.open3()
                    }else{
                        jsons=JSON.stringify(this.addess)
                        this.$http.post('http://localhost:8080/address/addressinsert',{"data":jsons},{emulateJSON:true}).then(resutl =>{
                            this.open()
                        })
                    }
                },
                open3() {
                    this.$message({
                        showClose: true,
                        message: '*标识选项为必填',
                        type: 'error'
                    });
                },
                open() {
                    this.$alert('添加', '提示消息', {
                    confirmButtonText: '添加成功',
                    callback: action =>{
                        location.href="address.html"
                    }
                 })
                },
            },
            created () {
               
            }
        })      
    </script>

</body>
</html>